<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {$LOAD_STYLE.top|raw}
</head>
<style type="text/css">
.colorbox{
    margin: 0px;
    padding: 0px;
}
.colorbox .color-x{
    text-align: center;
    padding: 5px;
    margin: 0px;
    margin-bottom: 20px;
    border-right:2px #FFF solid;
}
.colorbox .colorval{
    height: 100px;
    margin: 0px;
	border-radius: 10px;
}
.colorbox .layui-input{
	text-align: center;
	padding-left: 0px;
}
.colorbox a button,.colorbox h5{
	line-height: 14px;
    color:#797979;
}
.colorbox h5,.colorbox p{
	margin-top: 10px;
	padding: 0px;
}
.colorbox .rose{
	margin-bottom: 8px;
}
.colorbox .rose input{
	width: 47%;
	display: inline;
}
.rosestyle{
	background-color: #E6F0FF;
	border: 1px solid #80B3FF;
}
.colorbox .ocolor1{
	color: #DDDDDD;
}
.colorbox .ocolor2{
	color: #CA1D3E;
}
.gray{
	background:-webkit-gradient(linear,0 0,0 100%,from(#999999),to(#ffffff));
}
</style>
	<body class="pear-container">
<!-- 		<div class="layui-card">
			<div class="layui-card-body">
				<a class="pear-btn pear-btn-md pear-btn-primary" lay-event="pop" url="{:U('cloth.color/add')}/pid/{$pid}" poptitle="添加颜色">
					<i class="layui-icon layui-icon-add-1"></i>
					添加颜色
				</a>
				<a class="pear-btn pear-btn-md">
					<i class="layui-icon layui-icon-refresh-1" lay-event="reload"></i>
					刷新页面
				</a>
			</div>
		</div> -->
		<div class="layui-card">
			<div class="layui-card-body">
				<div class="layui-row layui-col-space10 colorbox">				  
				</div>
			</div>
		</div>

		<script type="text/html" id="tpl">
			{{#  layui.each(d.data, function(index, d){ }}
			<div class="layui-col-md1 layui-col-xs6 layui-col-sm6 color-x" data-index="{{ d.id }}">
				{{# if(d.gray==1){ }}
				<div class="layui-col-md12 layui-col-sm10 colorval gray"></div>
				{{# }else{ }}
				<div class="layui-col-md12 layui-col-sm10 colorval" style="background-color:#{{ d.val }}"></div>
				{{# } }}
					<div class="layui-col-md12 layui-col-sm2">
					  <h5>{{ d.colorid }} ({{ d.name }})</h5>
					  <h5>#{{ d.val }}</h5>
					  {{# if(d.number==d.onumber && d.colorid==d.ocolorid){ }}
					  <h5 class="ocolor1">[{{ d.onumber }} # {{ d.ocolorid }}]</h5>
					  {{# }else{ }}
					  <h5 class="ocolor2">[{{ d.onumber }} # {{ d.ocolorid }}]</h5>
					  {{# } }}
					  <p><input type="text" class="layui-input"  id="sort{{ d.id }}" class="form-control" value="{{ d.sort }}" data-id="{{ d.id }}" data-field="sort" data-original-title="颜色排序,越小越前" focus-select></p>
					  <p class="rose">
						<input type="text" class="layui-input {{# if(d.rose>0){ }}rosestyle{{# } }}" id="rose{{ d.id }}" value="{{ d.rose }}" data-id="{{ d.id }}"  data-field="rose" data-original-title="零售加价" focus-select>
						<input type="text" class="layui-input {{# if(d.rose>0){ }}rosestyle{{# } }}" id="rose2{{ d.id }}" value="{{ d.rose2 }}" data-id="{{ d.id }}" data-field="rose2" data-original-title="进货加价" focus-select>
					  </p>
					  <p>
					  <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="pop" url="{:U('cloth.color/edit')}/id/{{d.id}}" poptitle="修改颜色"><i class="layui-icon layui-icon-edit"></i></button>
					  <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove" data-id="{{ d.id }}"><i class="layui-icon layui-icon-delete"></i></button>
					  </p>
				   </div>
				</div>
			</div>
			{{#  }); }}
		</script>

		<div id="layui-page-box" class="diy-page-box"></div>
		
        <script>			
        layui.use(['table', 'form', 'jquery','common','laydate','laytpl','laypage','element','mycomm'], function() {
            let table = layui.table;
            let form = layui.form;
            let $ = layui.jquery;
            let common = layui.common;
			let mycomm = layui.mycomm;
			let laytpl = layui.laytpl;
			let laypage = layui.laypage;
			var element = layui.element;
            let MODULE_PATH = "{$MODULE_PATH}";
			
			mycomm.table_tpl(MODULE_PATH+'index',{pid:{$pid}},tpl,'.colorbox',120,function(){
				action_render();	
			});	
			
			
			function action_render(){
				$('[lay-event="reload"]').bind('click',function(){
					window.page_reload();
				});
				
				$('[lay-event="pop"]').bind('click',function(){
					var title=$(this).attr('poptitle');
					var url=$(this).attr('url');
					mycomm.tool_pop(url,title);
				});
				
				$('[lay-event="remove"]').bind('click',function(){
					var $id = $(this).attr('data-id');
					confirmed('确定要删除该{$controller_title}', function(index) {
						layer.close(index);
						let loading = layer.load();
						$.ajax({
							url:MODULE_PATH + 'remove',
							data:{id:$id},
							dataType: 'json',
							type: 'POST',
							success: function(res) {
								layer.close(loading);
								//判断有没有权限
								if(res && res.code==999){
									Alert(res.msg);
									return false;
								}else if (res.code==200) {
									Alert(res.msg,'success',1,function(){
										console.log($id);
										$('[data-index="'+$id+'"]').remove();
									});
								} else {
									Alert(res.msg,'error',3);
								}
							}
						})
					});
				});
				
				$("[data-field]").bind('change',function(){
					var input = $(this);
					var val=input.val();
					var url="{:U('cloth.color/setValue')}";
					var id=input.attr('data-id');
					var field=input.attr('data-field');
					var data={id:id,value:val,field:field};
					$.post(url,data,function(res){
						if (res.code==200) {
							input.addClass('successTips');
							input.removeClass('errorTips');
						}else{
							input.addClass('errorTips');
							input.removeClass('successTips');
							layer.msg(res.msg, {
								icon: 2,
								time: 2500
							});
						}
					});
				});
			}
			
        })
    </script>
	{$LOAD_STYLE.bottom|raw}
	</body>
</html>
